<template>
  <el-dialog
    :visible.sync="dialogVisible"
    top="10vh"
    append-to-body
    :close-on-click-modal="false"
    class="tag-edit-dialog tag-role-menu"
    width="80%"
    @closed="clearDialog"
    v-dialogMove
  >
    <div slot="title">
      <tag-content-header>
        <template #title>
          <span class="title-text">配置权限</span>
        </template>
      </tag-content-header>
    </div>
    <div class="menu-box">
      <el-checkbox-group v-model="checkList">
        <div class="menu-item" v-for="item in menuList" :key="item.menuId">
          <div class="level-parent">
            <el-checkbox :label="item.menuId" @change="checkChange(item)">{{ item.menuNm }}</el-checkbox>
          </div>
          <div class="level-leaf">
            <template v-for="item2 in item._children">
              <div class="level-item" :key="item2.menuId" v-if="item2._children && item2._children.length > 0">
                <div class="level-parent">
                  <el-checkbox :label="item2.menuId" @change="checkChange(item2)">{{ item2.menuNm }}</el-checkbox>
                </div>
                <div class="level-leaf">
                  <template v-for="item3 in item2._children">
                    <div class="level-item" :key="item3.menuId" v-if="item3._children && item3._children.length > 0">
                      <div class="level-parent">
                        <el-checkbox :label="item3.menuId" @change="checkChange(item3)">{{ item3.menuNm }}</el-checkbox>
                      </div>
                      <div class="level-leaf">
                        <template v-for="item4 in item3._children">
                          <div
                            class="level-item"
                            :key="item4.menuId"
                            v-if="item4._children && item4._children.length > 0"
                          >
                            <div class="level-parent">
                              <el-checkbox :label="item4.menuId" @change="checkChange(item4)">{{
                                item4.menuNm
                              }}</el-checkbox>
                            </div>
                            <div class="level-leaf">
                              <div class="level-leaf-item" v-if="checkShow(item4._children)">
                                <el-checkbox
                                  v-for="item5 in item4._children"
                                  :key="item5.menuId"
                                  :label="item5.menuId"
                                  @change="checkChange(item5)"
                                  >{{ item5.menuNm }}</el-checkbox
                                >
                              </div>
                            </div>
                          </div>
                        </template>
                        <div class="level-leaf-item" v-if="checkShow(item3._children)">
                          <template v-for="item4 in item3._children">
                            <el-checkbox
                              v-if="!item4._children || item4._children.length === 0"
                              :key="item4.menuId"
                              :label="item4.menuId"
                              @change="checkChange(item4)"
                              >{{ item4.menuNm }}</el-checkbox
                            >
                          </template>
                        </div>
                      </div>
                    </div>
                  </template>
                  <div class="level-leaf-item" v-if="checkShow(item2._children)">
                    <template v-for="item3 in item2._children">
                      <el-checkbox
                        :key="item3.menuId"
                        v-if="!item3._children || item3._children.length === 0"
                        :label="item3.menuId"
                        @change="checkChange(item3)"
                        >{{ item3.menuNm }}</el-checkbox
                      >
                    </template>
                  </div>
                </div>
              </div>
            </template>
            <div class="level-leaf-item" v-if="checkShow(item._children)">
              <template v-for="item2 in item._children">
                <el-checkbox
                  :key="item2.menuId"
                  v-if="!item2._children || item2._children.length === 0"
                  :label="item2.menuId"
                  @change="checkChange(item2)"
                  >{{ item2.menuNm }}</el-checkbox
                >
              </template>
            </div>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import utils from '@/plugins/utils'
export default {
  data() {
    return {
      dialogVisible: false,
      menuList: [],
      checkList: [],
      menuIds: {}
    }
  },
  methods: {
    showDialog(params) {
      this.checkList = JSON.parse(JSON.stringify(params))
      this.getMenuList()
      this.dialogVisible = true
    },
    getMenuList() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysMenuMgr/me'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.menuList = utils.arrayToTree(data.data, {
            id: 'menuId',
            pid: 'parentMenuId',
            mainSort: 'treeLevel',
            minorSort: 'sortNo'
          })
          data.data.forEach(item => {
            this.menuIds[item.menuId] = item
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    submit() {
      this.$emit('save', this.checkList)
      this.dialogVisible = false
    },
    checkShow(list = []) {
      for (var i = 0; i < list.length; i++) {
        if (!list[i]._children || list[i]._children.length === 0) {
          return true
        }
      }
      return false
    },
    checkChange(item) {
      let check = this.checkList.indexOf(item.menuId) === -1 ? -1 : 1
      if (item._children && item._children.length > 0) {
        for (var i = 0; i < item._children.length; i++) {
          this.setCheck(item._children[i], check)
        }
      }
      if (check === 1) {
        this.setParent(item.parentMenuId)
      }
    },
    setCheck(item, check) {
      let index = this.checkList.indexOf(item.menuId)
      if (check === -1 && index !== -1) {
        this.checkList.splice(index, 1)
      } else if (check === 1 && index === -1) {
        this.checkList.push(item.menuId)
      }
      if (item._children && item._children.length > 0) {
        for (var i = 0; i < item._children.length; i++) {
          this.setCheck(item._children[i], check)
        }
      }
    },
    setParent(menuId) {
      if (menuId && menuId !== 11000000) {
        let index = this.checkList.indexOf(menuId)
        if (index === -1) {
          this.checkList.push(menuId)
          this.setParent(this.menuIds[menuId].parentMenuId)
        }
      }
    },
    clearDialog() {
      this.menuList = []
      this.checkList = []
      this.menuIds = {}
    }
  }
}
</script>

<style lang="scss">
.tag-edit-dialog.tag-role-menu {
  .menu-item {
    border: 1px solid $border-color;
    display: flex;
    &:not(:last-child) {
      border-bottom: 0;
    }
  }
  .level-parent {
    padding: 10px 10px 10px 15px;
    flex-basis: 160px;
    flex-shrink: 0;
    border-right: 1px solid $border-color;
  }
  .level-leaf {
    flex-grow: 1;
  }
  .level-item {
    display: flex;
    border-bottom: 1px solid $border-color;
    &:last-child {
      border-bottom: 0;
    }
  }
  .level-leaf-item {
    padding: 10px 10px 10px 15px;
  }
}
</style>
